<template>
  <div>
    <div class="city" @click="gocity" v-if="$route.meta.keepAlive">
      {{ $store.state.city }}
      <i class="iconfont icon-xiajiantou"></i>
    </div>
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      v-if="$route.meta.keepAlive"
    >
      <van-swipe-item>
        <img
          src="https://static.maizuo.com/v5/upload/f32ff1a98fedbff709eb1b764aefe06f.jpg"
          alt=""
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://static.maizuo.com/v5/upload/a90f1d68c4dc30be98e780ef24348431.jpg"
          alt=""
        />
      </van-swipe-item>
      <van-swipe-item>
        <img
          src="https://static.maizuo.com/v5/upload/e59ef11a11569fcd97b05f5b827f41f4.jpg"
          alt=""
        />
      </van-swipe-item>
    </van-swipe>
    <van-tabs
      @click="onClick"
      line-width="56"
      color="#ff5f16"
      title-active-color="#ff5f16"
      title-inactive-color="#191a1b"
      :class="{ showheader: showheader }"
      v-if="$route.meta.keepAlive"
      v-model="active"
    >
      <van-tab title="正在热映"></van-tab>
      <van-tab title="即将上映"></van-tab>
    </van-tabs>
  </div>
</template>
<script>
import Vue from 'vue'
import { Tab, Tabs, Swipe, SwipeItem } from 'vant'

Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Tab)
Vue.use(Tabs)
export default {
  data() {
    return {
      urlArr: ['/movie/playing', '/movie/feature'],
      showheader: false,
      active: 1
    }
  },
  created() {
    // 获取当前路由
    // console.log(this.$route.path)
    const path = this.$route.path
    let index = this.urlArr.indexOf(path)
    // index找到了和-1
    // if (index >= 0) {
    //   this.active = index
    // } else {
    //   if (path === '/movie/playing') {
    //     this.active = 0
    //   }
    // }
    if (index < 0 && path === '/movie/feature') {
      index = 0
    }
    this.active = index
  },
  methods: {
    onClick(index, title) {
      this.$router.push(this.urlArr[index])
    },
    gocity() {
      this.$router.push('/city')
    }
  },
  mounted() {
    window.addEventListener('scroll', () => {
      const t = document.documentElement.scrollTop || document.body.scrollTop
      if (t >= 220) {
        this.showheader = true
      } else {
        this.showheader = false
      }
    })
  }
}
</script>
<style lang="scss" scoped>
.showheader {
  position: fixed;
  left: 0;
  top: 44px;
  z-index: 2;
  width: 100%;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  //   line-height: 150px;
  text-align: center;
  position: relative;
}
.van-swipe .van-swipe__indicators {
  position: absolute;
  left: 0;
  top: 0;
}
.my-swipe .van-swipe-item {
  img {
    width: 100%;
    height: 100%;
  }
}
.city {
  position: absolute;
  left: 11px;
  top: 13px;
  color: #fff;
  z-index: 3;
  font-size: 12px;
  border-radius: 15px;
  height: 30px;
  line-height: 30px;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 0 5px;
  text-align: center;
  box-sizing: border-box;
  i {
    font-size: 1px;
  }
}
</style>